<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			*{
				font: 16px "微软雅黑";
				/* 去掉无序列表样式 针对一项列表项标记*/
				list-style-type: none;
				/* 去掉无序列表样式 针对三项①列表项标记list-style-type
				                          ②列表项位置list-style-position
										  ③列表项图片list-style-image
								以上三项所有的效果，去掉样式*/
				list-style: none;
				/* 去掉内外边距：ul li存在外边距 */
				margin: 0;
				padding: 0;
			}
			aside{
				width: 255px;
				height: 530px;
				background: #878787;
				/* 盒子模型：外边距 */
				margin: 20px 200px;
			}
			aside ul.li_sidebar li{
				width: 235px;
				height: 46px;
				text-align: left;
				line-height: 50px;
				/* 挂靠位【固定】 使用相对定位 */
				position: relative;
				top: 15px;
			}
			aside ul.li_sidebar li:hover{
				background: pink;
			}
			/* 挂靠点【活动】使用绝对定位。按照父级位置定位 */
			aside ul.li_sidebar div.out{
				width: 400px;
				height: 460px;
				border: 1px solid red;
				/* 绝对定位 */
				position: absolute;
				left: 435px;
				/* 默认隐藏 搞不定【jQuery】*/
				display: none;
			}
			/* 新增样式  大于号:右侧撑大*/
			aside ul.li_sidebar li span{
				float: right;
				padding-right: 20px;
			}
			/* 新增样式  左栏左侧文字间隙:左侧撑大 */
			aside ul.li_sidebar li{
				padding-right: 20px;
			}
		</style>
	</head>
	<body>
		<!-- html结构：外层div  .sidebar   
		    html结构标记：aside元素，语义化元素，表示：左栏、侧边栏、广告
			            有利于SEO优化
			             通常代替div+id/class
		               内层ul.ul_sidebar   li*10
					   内容参考京东左栏第一个
			css结构：内部引入方式
			        通配选择器--合理添加
					外层aside  235*460  背景色
					内层每个li加宽高235*46
					内层文本垂直居中对齐，文字16px
					鼠标移动上去li，背景色改变
						-->
		<aside>
			<ul class="li_sidebar">
				<!-- 弹出框，模式：div+别名 -->
				<div class="out"></div>
				<li>手机 平板 电话 <span>></span></li>
				<li>电视 盒子 <span>></span></li>
				<li>路由器 智能硬件 <span>></span></li>
				<li>移动电源 插线板 <span>></span></li>
				<li>耳机 音箱 <span>></span></li>
				<li>电池 存储卡 <span>></span></li>
				<li>保护套 后盖 <span>></span></li>
				<li>贴膜 其他配件 <span>></span></li>
				<li>米兔 服装 <span>></span></li>
				<li>箱包 其他周边 <span>></span></li>
			</ul>
		</aside>
		<script>
		<!-- 左栏实现：1.添加事件 li 2.切换效果  3.切换效果 -->
		$("aside ul.li_sidebar li").hover(function(){
			//弹出框 默认隐藏--抓弹出框  第一件事 显示
			$("aside ul.li_sidebar div.out").css("display","block");
		},function(){
			$("aside ul.li_sidebar div.out").css("display","none")
		});
		</script>
	</body>
</html>
